<template>
    <div>
        <v-chart :force-fit="true" :height="height" renderer="svg" :padding="padding">
            <v-tooltip></v-tooltip>
            <v-axis></v-axis>
            <v-legend></v-legend>
            <v-view :data="data" :scale="scale" :filter="filter">
                <v-stack-bar :position="'year*percent'" :color="'country'" :v-style="stackBarStyle" :label="label"
                    :onLabelClick="onLabelClick"></v-stack-bar>
            </v-view>
        </v-chart>
    </div>
</template>

<script>


const DataSet = require('@antv/data-set');

const data = [
    { country: 'E', year: '2020', value: 163 },
    { country: 'E', year: '2021', value: 203 },
    { country: 'E', year: '2022', value: 276 },
    { country: 'E', year: '2023', value: 408 },
    { country: 'E', year: '2024', value: 547 },
    { country: 'E', year: '2025', value: 729 },
    { country: 'E', year: '2035', value: 628 },
    { country: 'E', year: '2050', value: 828 },
    { country: 'S', year: '2020', value: 502 },
    { country: 'S', year: '2021', value: 635 },
    { country: 'S', year: '2022', value: 809 },
    { country: 'S', year: '2023', value: 947 },
    { country: 'S', year: '2024', value: 1402 },
    { country: 'S', year: '2025', value: 3634 },
    { country: 'S', year: '2035', value: 5268 },
    { country: 'S', year: '2050', value: 7268 },
    { country: 'G', year: '2020', value: 163 },
    { country: 'G', year: '2021', value: 203 },
    { country: 'G', year: '2022', value: 276 },
    { country: 'G', year: '2023', value: 408 },
    { country: 'G', year: '2024', value: 547 },
    { country: 'G', year: '2025', value: 729 },
    { country: 'G', year: '2035', value: 628 },
    { country: 'G', year: '2050', value: 828 },
];

const scale = [{
    dataKey: 'percent',
    min: 0,
    formatter: '.2%',
}];
const filter = [{
    dataKey: 'country',
    callback: (ev) => {
        return ev === 'E';
    }
}];


const ds = new DataSet();

export default {
    name: '',
    data() {
        return {
            data: [],
            scale,
            padding: [80, 80],
            height: 400,
            filter,
            stackBarStyle: {
                stroke: '#fff',
                lineWidth: 1
            },
            label: ['value', {
                density: 0.3,
                formatter: ''
            }],
            onLabelClick: (ev) => {
                console.log('label click', ev);
            },
        };
    },
    mounted() {
        const dv = ds.createView().source(data);
        dv.transform({
            type: 'percent',
            field: 'value',
            dimension: 'country',
            groupBy: ['year'],
            as: 'percent'
        });
        this.$data.data = dv;
    },

};
</script>
